/* 
    Created on : Dec 11, 2014, 4:05:08 PM
    Author     : DucTuan
*/
#tvshow{
    padding-bottom: 5px;
}
#slide_tvshow{
    background: #fff;
    padding: 5px;
    position:relative;
    .bx-wrapper .bx-next{
        right: -32px;
    }
    .bx-wrapper .bx-prev{
        left: -32px;
    }
    img{
        width: 100%;
    }
    .statusbar{
        height: 50px;
        background: rgba(0, 0, 0, .6);
        position: absolute;
        bottom: 5px;
        left: 5px;
        right: 5px;
        overflow:hidden;

        .info{
            width: 300px;
            right: 0px;
            bottom: 0px;
            left: auto;
            background:none;
            .logo{
                margin-left: 50px;
            }
        }
        .status{
            text-transform: uppercase;
            color:#fff;
            font-family: $font_swiss;
            font-size: 18px;
            font-weight: lighter;
            position: absolute;
            top: 12px;
            left: 10px;
            right: 260px;
            overflow:hidden;
            height:100%;
            .hidden{
                overflow:hidden;
                width:20000px;
                height:100%;
                position: relative;
                .text{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: inline-block;
                    position: absolute;
                    span{
                        display: inline-block;
                    }
                }
                .before{
                    // @include translateX(-102%);
                }
                .current{
                    //@include translateX(100%);
                }
            }
        }
        .status.play{
            color: #f9bf2d;
            @include image('arrow.png');
            background-position: 0px 8px;
            padding-left: 20px;

        }
    }
}
#slide_tvshow:after{
    content: "";
    display: block;
    height: 21px;
    width: 100%;
    @include bg_image('shadow-slides.png');
    position: absolute;
    bottom: -10px;
    left: 0px;
    z-index: -1;
}
#slide_tvshow.slide_view{
    .statusbar{
        bottom:0px;
        left:0px;
        right:0px;
    }
}
#content_tvshow{
    color: rgb(107, 65, 20);
    margin: 30px 0px 36px;
    line-height: 23px;
    font-size: 18px;
    box-sizing: border-box;
    display: none;
    
    .Cover{
        padding: 5px;
        background: #fff;
        margin-bottom: 36px;
        img{
            width: 100%;
        }
    }
    .Question{
        margin: 0px 0px 25px;
        box-sizing: border-box;

    }
    .Choices,.Statistic{
        float: left;
        width: 50%;
        padding: 20px 15px 0px 0px;
        box-sizing: border-box;
        overflow:hidden;
        li{

            position: relative;
            padding: 10px 10px 10px 50px;
            margin: 0px 0px 20px;
            list-style: none;
            border-radius: 3px;
            box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px;
            box-sizing: border-box;
            background: rgb(255, 255, 255);
            label{
                display: inline-block;
                position: absolute;
                top: 0px;
                left: 0px;
                bottom: 0px;
                width: 37px;
                text-align: center;
                padding: 10px;
                border-radius: 3px 0px 0px 3px;
                color: rgb(255, 255, 255);
                text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 1px;
                box-shadow: rgba(0, 0, 0, 0.298039) 1px 1px 1px;
                box-sizing: border-box;
                @include bg_gradient2(#fef27a, #ffc71c);
            }
        }
        li.Answer:hover{
            background: #ddd;
            text-shadow: 0px 1px 0px #fff;
        }
        li.Answer{
            cursor: pointer;
        }
        li.Answer.selected{
            label{
                background: #E31C05;
            }
        }
        li.Answer.exactly{
            background: #BBFFBB!important;
            label{
                background: #009600!important;
            }
        }
    }
    .Choices.effect{
        ul{
            li{

            }
            li:nth-child(even){
                @extend .fadeInLeft;
            }
            li:nth-child(odd){
                @extend .fadeInRight;
            }

            li:nth-child(1) {
                @include animated_delay(1.5s,0s);
            }

            li:nth-child(2) {
                @include animated_delay(1.5s,0s);
            }

            li:nth-child(3) {
                @include animated_delay(1.5s,.3s);
            }

            li:nth-child(4) {
                @include animated_delay(1.5s,.3s);
            }

            li:nth-child(5) {
                @include animated_delay(1.5s,.6s);
            }

            li:nth-child(6) {
                @include animated_delay(1.5s,.6s);
            }

            li:nth-child(7) {
                @include animated_delay(1.5s,.9s);
            }

            li:nth-child(8) {
                @include animated_delay(1.5s,.9s);
            }
        }
    }
    .Statistic{
        padding: 20px 20px 0px;
        background: rgba(0, 0, 0, 0.498039);
        opacity:0;
        li{
            position: relative;
            padding: 0px 0px 0px 37px;
            margin: 0px 0px 20px;
            background: none;
            box-shadow: none;
            div{
                height: 100%;
                padding: 10px;
                color: rgb(108, 66, 18);
                border-radius: 0px 3px 3px 0px;
                box-sizing: border-box;
                background: rgb(255, 255, 255);
                box-shadow: rgba(0, 0, 0, 0.29804) 0px 1px 1px;
                min-width: 9%;
                text-align: right;
                @include transition(.4s);
            }
        }    
    }
    .Statistic.zoomIn{
        opacity: 1;
    }

}
#content_tvshow.iy7cd{
    .Statistic{
        display: none;
    }
    .Choices{
        width: 70%;
        margin: auto;
        float: none;
    }
}

#comment_tvshow{
    background-color: #fff;
    padding: 10px;
    margin-top:20px;
    margin-bottom: 5px;
    .group-button  {
        > div{
            display: inline-block;
            vertical-align: bottom;
        }
        .pluginButton{
            display: none;
        }

    }

}